<%--
  Created by IntelliJ IDEA.
  User: 王一同
  Date: 2021/11/20
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui/layui.js"></script>
</head>
<body style="margin: 10px">

<%--编辑新增权限--%>
<form class="layui-form" style="display:none;margin:0 10px" action="" id="userForm"  lay-filter="userForm">
    <input type="hidden" name="id"/>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-inline">
            <input type="text" name="rName" lay-verify="rName" autocomplete="off" placeholder="请输入角色名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色描述</label>
            <div class="layui-input-inline">
                <input type="text" name="meno" lay-verify="meno" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="status" lay-filter="status" id="status">
                <option value="0">禁用</option>
                <option value="1">启用</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<%--修改权限--%>

<div id="treeDemo" style="display: none">
    <div id="test1"></div>
    <br/>
    <%--提交修改权限的按钮--%>
    <button class="layui-btn layui-btn-sm" id="subPer" style="margin-left: 32%">提交权限修改</button>
</div>
<%--模糊查询表头栏目--%>
<div class="demoTable">
    <div class="layui-inline" >
        <input class="layui-input" placeholder="请输入角色名称" name="rName" id="rName" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search">搜索</button>
</div>
<%--新增按钮--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn" lay-event="addUser">新增角色</button>
        <a type="button" class="layui-btn" lay-event="refresh">刷新表格</a>
    </div>
</script>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    {{# if (d.status == 2) { }}
    <p style="color: red;font-style: italic;font-weight: lighter;font-weight: bold">Super Administrators</p>
    {{# } else if(d.status == 1) { }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="update">修改权限</a>
    </div>
    {{# } else { }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="update">修改权限</a>
    </div>
    {{# } }}
</script>

<script>

    layui.use(['table','jquery','layer','form','tree'], function(){
        var table = layui.table;
        var $=layui.jquery;
        var layer=layui.layer;
        var form=layui.form;
        var tree=layui.tree;

        $(function (){
            showtable();
        })
    function showtable(){
        table.render({
            elem: '#test'
            ,url: '${pageContext.request.contextPath}/role/findAll'
            ,toolbar: "#toolbarDemo"
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', title: 'ID', sort: true}
                ,{field:'rName', title: '角色名'}
                ,{field:'meno', title: '角色描述', sort: true}
                ,{field:'status', title: '状态',templet:function(d){
                        if (d.status==0){
                            return '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs">禁用</button>';
                        }else{
                            return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">启用</button>';
                        }
                    }}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
            ,page: true
            ,limit:5
            ,limits:[3,5,10,15]
        });
    }
        //新增事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event){
                case 'addUser':
                    openLayer("新增角色",null)
                    break;
                case 'refresh':
                    showtable()
                    break;
            };
        });
        function openLayer(title,data){
            $('#userForm')[0].reset();
            layer.open({
                type:1
                ,title:title
                ,area: ['400px','360px']
                ,content: $("#userForm")
            })
            form.val('userForm',data)
        }
        //提交
        form.on('submit(submitUser)',function (data){
            $.post("${pageContext.request.contextPath}/role/insert",
                data.field
                ,function (rs){
                    if(rs===200){
                        layer.closeAll();
                        showtable();
                        layer.msg(rs.msg);
                        table.reload('test');
                    }
                },"json");
        });


        //搜索按钮的点击事件
        $("#search").click(function(){
            table.reload('test',{
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    rName: $("#rName").val()
                }
            })
        });

        //监听左侧工具栏事件
        var data;
        table.on('tool(test)', function(obj){
            data = obj.data;
            if(obj.event === 'edit'){
                layer.closeAll();
                openLayer("修改用户",null)
                form.val('userForm',data)
            }else if(obj.event === 'update') {
                showTree();//调用显示树形结构
                //打开弹出框
                layer.open({
                    type: 1,
                    title: "修改权限",
                    content: $("#treeDemo"),
                    area: ['300px', '500px'],
                    offset: "50px"
                })
                //设置默认选中的权限
                getMenuIds(data.id)
            }
        });
        //点击确认分配权限按钮事件
        $("#subPer").click(function(){
            //0.获取所有被选中节点的数据
            var checkedData = tree.getChecked('demoId1');
            //1.获取所有被选中的权限id。
            var arrIds=[]; //存放所有被选中的id
            getCheckedMenuIds(arrIds,checkedData);
            console.log(arrIds)
            $.ajax({
                url:"${pageContext.request.contextPath}/menu/fenMenu",
                data: {"mIds":arrIds,"rid":data.id},
                type:"post",
                traditional:true,
                success: function(result){
                    if(result.code===2000){
                        layer.closeAll();
                        layer.msg(result.msg,{icon:1})
                    }else{
                        layer.msg(result.msg,{icon:5})
                    }
                },
                dataType:"json"
            })
        });
        //得到被选中的权限id
        function getCheckedMenuIds(arrIds,checkedData){
            for(var i=0;i<checkedData.length;i++){
                arrIds.push(checkedData[i].id);
                getCheckedMenuIds(arrIds,checkedData[i].children);
            }
        }
        //获取当前角色具有的权限id
        function getMenuIds(rid){
            $.ajax({
                url: "${pageContext.request.contextPath}/menu/getMenuIds",
                data: {"rid":rid},
                dataType: "json",
                success: function (result) {
                    tree.setChecked('demoId1', result.data); //勾选指定节点
                }
            })
        }
        //显示树形结构
        function showTree(){
            $.ajax({
                url:"${pageContext.request.contextPath}/menu/findAllMenu",
                success: function(result){
                    if(result.code===2000){
                        tree.render({
                            elem: '#test1'
                            ,data: result.data
                            ,showCheckbox: true  //是否显示复选框
                            ,id: 'demoId1'
                        });
                    }
                },
                dataType:"json"
            })
        }
    });
</script>
</body>
</html>





